<template>
  <div id="app">
    <div class="open">
      <el-image src="https://i01.lw.aliimg.com/media/lALPBY0V4x3hbePNAdzNAdw_476_476.png" class="appImg">
      </el-image>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import debounce from "@/utils/debounce.js";
export default {
  name: 'App',
  components: {},
  data() {
    return {
      uid: '',
      playlist: [],
      subList: [],
    };
  },
   mounted() {
    this.$utils.preventMouse();
    this.uid = localStorage.getItem('uid');
    if (localStorage.getItem('cookie') === null) {
      this.$notify({
        title: '提示',
        message: '需要登录才能使用到完整功能',
      });
    }
  },
  computed: {
    ...mapState(['cookie']),
  },
  watch: {
    cookie(newVal, oldVal) {
      this.playlist = []
      this.subList = []
      this.uid = localStorage.getItem('uid');
      this.getUserList()
    },
  },
  methods: {
    ...mapActions([
      'saveUserList',
      'saveSubList',
    ]),
    // 获取用户歌单
    getUserList: debounce(function () {
      this.playlist = []
      this.subList = []
      this.$api.userPlayList({ uid: this.uid, timestamp: this.$utils.timestamp(), cookie: localStorage.getItem('cookie') }).then((ret) => {
        for (let i = 0; i < ret.playlist.length; i++) {
          if (ret.playlist[i].creator.userId === parseInt(this.uid)) {
            this.playlist.push(ret.playlist[i])
          } else if (ret.playlist[i].creator.userId !== parseInt(this.uid)) {
            this.subList.push(ret.playlist[i])
          }
        }
        this.saveUserList({ userList: this.playlist })
        this.saveSubList({ subList: this.subList })
      })
    }, 1000),

    // // 判断是否兼容箭头函数
    // try {
    //   eval("()=>{}");
    //   // alert("浏览器支持箭头函数");
    // } catch (eo) {
    //   alert("本网站不兼容ie8，请下载最新的现代浏览器进行使用");
    //   window.location.href = "http://browsehappy.osfipin.com/";
    // }
  },
};
</script>

<style>
body {
  /* overflow-y: hidden; */
  overflow-x: hidden;
}

/*修改滚动条样式*/

div::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /**/
}

div::-webkit-scrollbar-track {
  /* background: rgb(239, 239, 239); */
  border-radius: 2px;
}

div::-webkit-scrollbar-thumb {
  background: rgb(191, 191, 191);
  border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
  background: rgb(173, 171, 171);
}

div::-webkit-scrollbar-corner {
  background: #179a16;
}

.open {
  position: fixed;
  width: 100%;
  z-index: 110;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: open 2s linear;
}

.appImg {
  width: 0px;
  height: 0px;
  border-radius: 20px;
  overflow: hidden;
  animation: colse 2s linear;
}

@keyframes open {
  from {
    height: 120vh;
    background: #f5f6f7;
  }

  to {
    height: 0vh;
    display: none;
    background: #ec4141;
  }
}

@keyframes colse {
  from {
    width: 200px;
    height: 200px;
    display: inline-block !important;
  }

  to {
    width: 0px;
    height: 0px;
    border-radius: 20px;
    display: none !important;
  }
}
</style>
